<template>
  <view class="radio-group">
    <view v-for="item in props.list" :key="item.value" @click="handleSelect(item.value)" class="radio-item">
      <text class="radio-label">{{ item.label }}</text>
      <image class="radio-circle" :src="item.value === selectedValue ? selectedIcon : unselectedIcon" mode="aspectFit" />
    </view>
  </view>
</template>

<script setup lang="ts">
const selectedIcon = '/static/icons/select_icon_s.png'
const unselectedIcon = '/static/icons/select_icon.png'
// 定义单选选项类型
interface RadioItem {
  label: string // 显示文本
  value: string | number // 对应值
}

// 定义组件 props
const props = defineProps<{
  list: RadioItem[] // 选项列表
  initialValue?: string | number // 初始值
}>()

// 定义组件事件
const emit = defineEmits<{
  change: [value: string | number] // 值变化事件
}>()

// 管理选中值
const selectedValue = ref(props.initialValue || '')

// 处理选择事件
const handleSelect = (value: string | number) => {
  selectedValue.value = value
  emit('change', value)
}
</script>

<style scoped lang="scss">
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.radio-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
}

.radio-label {
  font-size: 16px;
  color: #333;
}

.radio-circle {
  width: 28px;
  height: 28px;
  transition: all 0.3s ease;

  &.radio-checked {
    border: 2px solid blue; // 选中时添加边框
  }
}
</style>
